<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers: Spherical Mercator</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <!--[if lte IE 6]>
        <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
    <![endif]-->
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        .olControlAttribution { 
            bottom: 0px;
            left: 2px;
            right: inherit;
            width: 400px;
        }
        #map {
            height: 512px;
        }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>

    <script src="../lib/OpenLayers.js"></script>
  </head>
  <body>
    <h1 id="title">OpenLayers Spherical Mercator Example</h1>

    <div id="tags">
        spherical, mercator, osm, xyz, google, virtual earth, tile
    </div>
    <p id="shortdesc">
        Shows the use of the Spherical Mercator Layers, for overlaying 
        Google, Microsoft, and other layers with XYZ tiles.
    </p>
    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
    <script type="text/javascript">

    var map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:900913",
        displayProjection: "EPSG:4326",
        numZoomLevels: 18
    });

    // create Google Mercator layers
    var gphy = new OpenLayers.Layer.Google(
        "Google Physical",
        {type: google.maps.MapTypeId.TERRAIN}
    );
    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", // the default
        {numZoomLevels: 20}
    );
    var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    );
    var gsat = new OpenLayers.Layer.Google(
        "Google Satellite",
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
    );

    // create Bing layers

    // API key for http://openlayers.org. Please get your own at
    // http://bingmapsportal.com/ and use that instead.
    var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

    var veroad = new OpenLayers.Layer.Bing({
        key: apiKey,
        type: "Road",
        wrapDateLine: true
    });
    var veaer = new OpenLayers.Layer.Bing({
        key: apiKey,
        type: "Aerial",
        wrapDateLine: true
    });
    var vehyb = new OpenLayers.Layer.Bing({
        key: apiKey,
        type: "AerialWithLabels",
        wrapDateLine: true
    });

    // create OSM layers
    var mapnik = new OpenLayers.Layer.OSM();

    // create a vector layer for drawing
    var vector = new OpenLayers.Layer.Vector("Editable Vectors");

    map.addLayers([
        gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, mapnik, vector
    ]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.EditingToolbar(vector));
    map.addControl(new OpenLayers.Control.Permalink());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.zoomToMaxExtent();

    </script>
  </body>
</html>



